import { ComponentType } from 'react';
import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button, Text } from '@tarojs/components';
import { observer, inject } from '@tarojs/mobx';
import './index.less';

interface PageStateProps {
  counterStore: {
    counter: number,
    increment: Function,
    decrement: Function,
    incrementAsync: Function
  };
  operatorStore: {
    counter: number,
    tempCount: number,
    increment: Function
  };
}

interface Index {
  props: PageStateProps;
}

@inject('counterStore', 'operatorStore')
@observer
class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  };

  componentWillMount() {
  }

  componentWillReact() {
    console.log('componentWillReact');
  }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  increment = () => {
    const { counterStore } = this.props;
    counterStore.increment();
  }

  incrementB = () => {
    const { operatorStore } = this.props;
    operatorStore.increment();
  }

  decrement = () => {
    const { counterStore } = this.props;
    counterStore.decrement();
  }

  incrementAsync = () => {
    const { counterStore } = this.props;
    counterStore.incrementAsync();
  }

  render() {
    const { counterStore: { counter: counterA }, operatorStore: { counter: counterB, tempCount } } = this.props;
    return (
      <View className='index'>
        <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
        <Button onClick={this.incrementAsync}>Add Async</Button>
        <Text>{counterA}</Text>
        <Button onClick={this.incrementB}>+</Button>
        <Text>{counterB}{tempCount}</Text>
      </View>
    );
  }
}

export default Index as ComponentType;
